<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            border: 10px red solid;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
            /* 浮动后 无论outer inner 位置都没有变  */
            /* outer高度没有了 */
            /* 这就是高度塌陷 */
            /* 浮动的布局 父元素的高度默认被子元素被撑开 子元素浮动 后 
            完全脱离文档流 子元素脱离后 无法撑开父元素 */
            /* 这样父元素就没人撑着  */
            /* 是个问题 */
            /* 会不会影响排列   */
            /* 其他的元素会上移 */
            /* 导致父元素高度丢失 其下的元素会自动上移  导致页面的布局紊乱 */
            /* BFC  块级格式化环境  */
            /* css中的隐含的属性 开启bfc的元素变成一个独立的布局 */
            /* 和其他的块不同 */
            /* 特点：1.不会被浮动元素覆盖  */
            /* 2.子元素和父元素的外边距不会重叠  */
            /* 3.可以包含浮动的子元素 不会出现塌陷 */
            /* 方法：1.设置元素浮动 不建议  都是间接开启  高度不塌陷 但是从文档流中脱离*/
            /* 2.把元素设置成行内块元素 不建议  */
            /* 3.将元素overflow设置一个非visible 值  不是即可 */
            /* auto  hidden  */
            /* 一般都是把元素设置成overflow hidden  开启bfc 以使其包含浮动元素 */
            /* 开启了bfc以后就分内外了 */
        }

        /* outer的高度被inner撑开 */
    </style>
</head>

<body>
    <!-- 浮动的问题 高度塌陷问题 -->
    <!-- 无法自动调配内容的大小 -->
    <!-- 很多情况下 父元素的高度是不会写死的 -->
    <!-- 希望 根据内容的多杀定高  -->
</body>
<div class="outer">
    <div class="inner">

    </div>
</div>
<!-- <div class="width"></div> -->

</html>